<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室 - 聊天</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-main">
            <div class="chat-header">
                <a href="/users" class="btn" style="margin-right: 15px;"><i class="fas fa-arrow-left"></i> 返回</a>
                <div id="chat-target-avatar" class="user-avatar"></div>
                <h3 id="chat-target-name" style="margin-left: 15px;"></h3>
                <span id="room-code-display" style="margin-left: 15px; color: #666; font-size: 14px;"></span>
                <button id="debug-toggle" style="margin-left: auto; padding: 5px; background: #555; color: white; border: none; border-radius: 3px;">调试</button>
            </div>
            <div id="chat-messages" class="chat-messages"></div>
            <div class="chat-input">
                <input type="text" id="message-input" placeholder="输入消息..." autofocus>
                <button id="send-btn" class="btn"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>
    
    <!-- 调试面板 -->
    <div id="debug-panel" style="display: none; position: fixed; top: 0; right: 0; width: 400px; height: 100%; background: rgba(0,0,0,0.8); color: white; padding: 10px; overflow: auto; z-index: 1000;">
        <h3>WebSocket调试</h3>
        <div>
            <p><strong>连接状态:</strong> <span id="ws-status">未连接</span></p>
            <p><strong>当前用户:</strong> <span id="current-user-info">-</span></p>
            <p><strong>订阅路径:</strong> <span id="subscription-path">-</span></p>
            <p><strong>最后接收消息:</strong> <span id="last-received-message">-</span></p>
            <button id="reconnect-ws" style="padding: 5px; margin-top: 10px; background: #4CAF50; color: white; border: none; border-radius: 3px;">重新连接</button>
        </div>
        <h3>日志</h3>
        <div id="debug-log" style="height: 300px; overflow: auto; background: #222; padding: 5px; font-family: monospace; font-size: 12px;">
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        // 调试日志函数
        function logDebug(message) {
            const debugLog = document.getElementById('debug-log');
            const timestamp = new Date().toLocaleTimeString();
            debugLog.innerHTML += `<div>[${timestamp}] ${message}</div>`;
            debugLog.scrollTop = debugLog.scrollHeight;
            console.log(`[DEBUG] ${message}`);
        }
        
        // 显示/隐藏调试面板
        document.getElementById('debug-toggle').addEventListener('click', function() {
            const debugPanel = document.getElementById('debug-panel');
            debugPanel.style.display = debugPanel.style.display === 'none' ? 'block' : 'none';
        });
        
        // 重新连接WebSocket
        document.getElementById('reconnect-ws').addEventListener('click', function() {
            logDebug('手动重新连接WebSocket...');
            if (stompClient) {
                stompClient.disconnect();
            }
            connectWebSocket();
        });
        
        // 检查用户是否已登录
        const currentUser = JSON.parse(localStorage.getItem('user'));
        console.log('当前用户信息:', currentUser);
        
        if (!currentUser || !currentUser.id) {
            console.error('用户信息不完整，重定向到登录页面');
            localStorage.removeItem('user'); // 清除不完整的用户数据
            window.location.href = '/login';
        }
        
        // 重要：验证用户会话信息
        function validateUserSession() {
            // 添加会话调试信息
            console.log('当前用户ID:', currentUser.id);
            console.log('当前用户名:', currentUser.username);
            console.log('localStorage内容:', localStorage);
            
            // 检查是否有与存储的用户信息匹配的会话
            fetch(`/api/users/info/${currentUser.id}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('用户会话验证失败');
                    }
                    return response.json();
                })
                .then(user => {
                    if (user.username !== currentUser.username) {
                        console.error('用户会话不匹配！存储的用户名:', currentUser.username, '服务器用户名:', user.username);
                        // 可以选择更新本地存储或重定向到登录页面
                        alert('会话信息不一致，请重新登录');
                        localStorage.removeItem('user');
                        window.location.href = '/login';
                    } else {
                        console.log('用户会话验证成功');
                    }
                })
                .catch(error => {
                    console.error('用户会话验证错误:', error);
                });
        }
        
        // 在页面加载时验证会话
        validateUserSession();
        
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const chatType = urlParams.get('type');
        const userId = urlParams.get('userId');
        const roomCode = urlParams.get('roomCode');
        
        // 记录当前会话信息
        console.log('聊天类型:', chatType);
        console.log('目标用户ID:', userId);
        console.log('房间号:', roomCode);
        
        let targetUser = null;
        let chatRoom = null;
        let stompClient = null;
        let privateChatRoomCode = null; // 新增：私聊房间号
        
        // 初始化WebSocket连接
        function connectWebSocket() {
            document.getElementById('ws-status').textContent = '正在连接...';
            logDebug('开始WebSocket连接...');
            
            const socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            
            // 启用STOMP调试并记录到调试面板
            stompClient.debug = function(str) {
                console.log('STOMP: ', str);
                logDebug('STOMP: ' + str);
            };
            
            stompClient.connect({}, function(frame) {
                console.log('Connected: ' + frame);
                console.log('当前用户: ', currentUser.username);
                console.log('WebSocket连接成功，状态:', stompClient.connected ? 'CONNECTED' : 'DISCONNECTED');
                console.log('heart-beat:' + stompClient.heartbeat.outgoing + ',' + stompClient.heartbeat.incoming);
                console.log('version:' + stompClient.version);
                
                // 更新调试面板
                document.getElementById('ws-status').textContent = stompClient.connected ? 'CONNECTED' : 'DISCONNECTED';
                document.getElementById('current-user-info').textContent = currentUser.username + ' (ID: ' + currentUser.id + ')';
                
                logDebug('WebSocket连接成功: ' + frame);
                
                if (chatType === 'private') {
                    // 私聊情况下，如果已有房间号，则直接订阅
                    if (privateChatRoomCode) {
                        subscribeToPrivateChatRoom(privateChatRoomCode);
                        
                        // 确保历史消息在私聊房间订阅后加载
                        console.log('WebSocket连接成功，准备加载历史消息');
                        logDebug('WebSocket连接成功，准备加载历史消息');
                        setTimeout(() => {
                            loadMessages();
                        }, 500); // 给一点时间确保订阅完成
                    } else {
                        // 否则先加载目标用户信息，然后获取或创建私聊房间
                        logDebug('需要获取私聊房间号，即将查询用户信息');
                    }
                } else if (chatType === 'group') {
                    // 订阅群聊消息
                    const subscriptionPath = `/topic/group.${roomCode}`;
                    console.log('正在订阅群聊消息路径: ', subscriptionPath);
                    logDebug('开始订阅群聊消息: ' + subscriptionPath);
                    
                    // 更新调试面板
                    document.getElementById('subscription-path').textContent = subscriptionPath;
                    
                    // 添加更多错误处理和调试信息
                    try {
                        const subscription = stompClient.subscribe(subscriptionPath, function(message) {
                            console.log('触发群聊消息回调函数');
                            console.log('收到群聊消息: ', message);
                            console.log('消息内容: ', message.body);
                            console.log('消息头部信息:', message.headers);
                            
                            try {
                                const messageData = JSON.parse(message.body);
                                console.log('解析后的消息数据: ', messageData);
                                if (messageData.senderUsername !== currentUser.username) {
                                    console.log('即将显示群聊接收到的消息');
                                    
                                    // 添加前端显示所需的额外信息
                                    const displayMessageData = {
                                        ...messageData,
                                        senderAvatar: messageData.senderUsername.charAt(0).toUpperCase()
                                    };
                                    
                                    displayMessage(displayMessageData, false);
                                }
                            } catch (error) {
                                console.error('解析消息失败: ', error);
                                console.error('错误详情:', error.message);
                                console.error('原始消息:', message.body);
                            }
                        });
                        
                        console.log('群聊订阅状态:', subscription ? '成功' : '失败');
                        console.log('群聊订阅ID:', subscription.id);
                        
                        // 加载群聊历史消息
                        console.log('WebSocket连接成功，准备加载群聊历史消息');
                        logDebug('WebSocket连接成功，准备加载群聊历史消息');
                        setTimeout(() => {
                            loadMessages();
                        }, 500); // 给一点时间确保订阅完成
                    } catch (error) {
                        console.error('群聊订阅过程中出错:', error);
                    }
                }
                
                // 不再直接调用loadMessages，而是在特定条件下调用
                // loadMessages();
            }, function(error) {
                console.error('WebSocket连接错误:', error);
                alert('连接聊天服务器失败，请刷新页面重试！');
            });
        }
        
        // 发送消息
        function sendMessage() {
            const content = document.getElementById('message-input').value.trim();
            if (!content) return;
            
            // 检查WebSocket连接是否已建立
            if (!stompClient || !stompClient.connected) {
                console.error('WebSocket未连接');
                alert('聊天服务器连接中断，请刷新页面重试！');
                return;
            }
            
            const messageData = {
                content: content,
                senderUsername: currentUser.username,
                timestamp: new Date().toISOString()
                // 移除不支持的字段
            };
            
            if (chatType === 'private' && targetUser && targetUser.username) {
                messageData.receiverUsername = targetUser.username;
                // 确保 groupMessage 属性设置正确
                messageData.groupMessage = false;
                // 使用私聊房间号
                if (privateChatRoomCode) {
                    messageData.roomCode = privateChatRoomCode;
                }
                stompClient.send("/app/chat.sendPrivateMessage", {}, JSON.stringify(messageData));
                
                // 仅用于前端显示的完整消息对象
                const displayMessageData = {
                    ...messageData,
                    senderId: currentUser.id,
                    senderAvatar: currentUser.username.charAt(0).toUpperCase()
                };
                displayMessage(displayMessageData, true);
            } else if (chatType === 'group' && chatRoom && chatRoom.roomCode) {
                messageData.roomCode = chatRoom.roomCode;
                messageData.groupMessage = true;
                stompClient.send("/app/chat.sendGroupMessage", {}, JSON.stringify(messageData));
                
                // 仅用于前端显示的完整消息对象
                const displayMessageData = {
                    ...messageData,
                    senderId: currentUser.id,
                    senderAvatar: currentUser.username.charAt(0).toUpperCase()
                };
                displayMessage(displayMessageData, true);
            } else {
                console.error('无法发送消息：目标用户或聊天室信息不完整');
                alert('无法发送消息，请刷新页面重试');
            }
            
            document.getElementById('message-input').value = '';
        }
        
        // 显示消息
        function displayMessage(message, isSent) {
            console.log('显示消息:', message, '是否为发送方:', isSent);
            
            // 检查消息对象是否完整
            if (!message || typeof message !== 'object' || !message.content || !message.senderUsername) {
                console.error('无效的消息对象:', message);
                logDebug('错误: 无效的消息对象或缺少必要字段');
                return;
            }
            
            logDebug(`尝试显示消息: ${message.content}, 发送方: ${message.senderUsername}, 接收方: ${message.receiverUsername}`);
            
            // 更新调试面板
            document.getElementById('last-received-message').textContent = `"${message.content}" 从 ${message.senderUsername} 到 ${message.receiverUsername || '群组'}`;
            
            const chatMessages = document.getElementById('chat-messages');
            const messageElement = document.createElement('div');
            messageElement.className = `message ${isSent ? 'message-sent' : 'message-received'}`;
            
            // 处理日期格式
            let formattedTime;
            if (typeof message.timestamp === 'string') {
                formattedTime = new Date(message.timestamp).toLocaleTimeString();
            } else if (message.timestamp instanceof Date) {
                formattedTime = message.timestamp.toLocaleTimeString();
            } else {
                formattedTime = new Date().toLocaleTimeString();
            }
            
            // 输出消息发送/接收状态及来源
            console.log(`消息显示 - 内容: "${message.content}", 发送者: ${message.senderUsername}, 接收者: ${message.receiverUsername}, 时间: ${formattedTime}, 是否发送: ${isSent ? '是' : '否'}`);
            logDebug(`消息显示 - 内容: "${message.content}", 时间: ${formattedTime}, 是否发送: ${isSent ? '是' : '否'}`);
            
            // 添加消息容器和用户头像
            const messageContainer = document.createElement('div');
            messageContainer.className = `message-container ${isSent ? 'sent' : 'received'}`;
            
            // 创建消息头像
            const avatarElement = document.createElement('div');
            avatarElement.className = 'message-avatar';
            
            if (isSent) {
                // 当前用户头像
                avatarElement.textContent = currentUser.username.charAt(0).toUpperCase();
                avatarElement.style.backgroundColor = '#03A9F4'; // 使用主要颜色
            } else {
                // 发送者头像
                avatarElement.textContent = message.senderUsername.charAt(0).toUpperCase();
                avatarElement.style.backgroundColor = '#FF9800'; // 使用不同颜色
            }
            
            // 创建消息内容
            const contentContainer = document.createElement('div');
            contentContainer.className = 'message-content-container';
            
            // 添加用户名（仅对接收到的消息显示）
            if (!isSent) {
                const usernameElement = document.createElement('div');
                usernameElement.className = 'message-username';
                usernameElement.textContent = message.senderUsername;
                contentContainer.appendChild(usernameElement);
            }
            
                messageElement.innerHTML = `
                    <div>${message.content}</div>
                    <div class="message-info">${formattedTime}</div>
                `;
            
            contentContainer.appendChild(messageElement);
            
            // 根据消息方向组织头像和消息内容
            if (isSent) {
                messageContainer.appendChild(contentContainer);
                messageContainer.appendChild(avatarElement);
            } else {
                messageContainer.appendChild(avatarElement);
                messageContainer.appendChild(contentContainer);
            }
            
            chatMessages.appendChild(messageContainer);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            logDebug('消息已添加到聊天窗口');
        }
        
        // 加载历史消息
        function loadMessages() {
            console.log('开始加载历史消息...');
            logDebug('开始加载历史消息...');
            
            if (chatType === 'private' && targetUser && targetUser.id && currentUser && currentUser.id) {
                console.log('准备加载私聊历史消息，当前用户ID:', currentUser.id, '目标用户ID:', targetUser.id);
                logDebug(`准备加载私聊历史消息，currentUser: ${currentUser.username}(${currentUser.id}), targetUser: ${targetUser.username}(${targetUser.id})`);
                
                // 如果已有私聊房间号，使用房间号加载消息
                if (privateChatRoomCode) {
                    console.log('使用私聊房间号加载消息:', privateChatRoomCode);
                    logDebug('使用私聊房间号加载消息: ' + privateChatRoomCode);
                    
                    fetch(`/api/messages/privatechat/${privateChatRoomCode}`)
                        .then(response => {
                            console.log('私聊消息API响应状态:', response.status);
                            logDebug('私聊消息API响应状态: ' + response.status);
                            return response.json();
                        })
                        .then(messages => {
                            console.log('加载私聊房间历史消息:', messages);
                            logDebug('加载到' + (Array.isArray(messages) ? messages.length : 0) + '条私聊房间历史消息');
                            
                            if (Array.isArray(messages) && messages.length > 0) {
                                logDebug('历史消息示例: ' + JSON.stringify(messages[0]));
                                
                                messages.forEach((message, index) => {
                                    console.log(`处理第${index+1}条消息:`, message);
                                    
                                    // 检查消息对象结构
                                    if (!message) {
                                        console.error('消息对象为空');
                                        logDebug('消息对象为空');
                                        return; // 跳过此消息
                                    }
                                    
                                    // 适配后端返回的两种可能格式
                                    let isSent = false;
                                    let displayMessageData = {};
                                    
                                    // 处理包含sender对象的格式
                                    if (message.sender && message.sender.id) {
                                        isSent = message.sender.id == currentUser.id;
                                        displayMessageData = {
                                            content: message.content,
                                            senderUsername: message.sender.username,
                                            receiverUsername: message.receiver ? message.receiver.username : targetUser.username,
                                            roomCode: privateChatRoomCode,
                                            timestamp: message.timestamp,
                                            senderAvatar: message.sender.username.charAt(0).toUpperCase()
                                        };
                                    } 
                                    // 处理扁平化的格式（直接包含senderUsername等属性）
                                    else if (message.senderUsername) {
                                        isSent = message.senderUsername === currentUser.username;
                                        displayMessageData = {
                                            content: message.content,
                                            senderUsername: message.senderUsername,
                                            receiverUsername: message.receiverUsername || targetUser.username,
                                            roomCode: message.roomCode || privateChatRoomCode,
                                            timestamp: message.timestamp,
                                            senderAvatar: message.senderUsername.charAt(0).toUpperCase()
                                        };
                                    } else {
                                        console.error('无法识别的消息格式:', message);
                                        logDebug('无法识别的消息格式: ' + JSON.stringify(message));
                                        return; // 跳过此消息
                                    }
                                    
                                    logDebug(`显示消息: ${displayMessageData.content}, 发送者: ${displayMessageData.senderUsername}, 是否为发送方: ${isSent}`);
                                    displayMessage(displayMessageData, isSent);
                                });
                                
                                // 滚动到底部
                                const chatMessages = document.getElementById('chat-messages');
                                chatMessages.scrollTop = chatMessages.scrollHeight;
                                console.log('历史消息加载完成并滚动到底部');
                                logDebug('历史消息加载完成并滚动到底部');
                            } else {
                                console.log('没有找到历史消息或消息格式不正确');
                                logDebug('没有找到历史消息或消息格式不正确');
                            }
                        })
                        .catch(error => {
                            console.error('加载私聊房间消息失败:', error);
                            logDebug('加载私聊房间消息失败: ' + error.message);
                            
                            // 回退到旧方式加载私聊消息
                            loadPrivateChatMessages();
                        });
                } else {
                    // 使用旧方式加载私聊消息
                    console.log('没有找到私聊房间号，使用旧方式加载消息');
                    logDebug('没有找到私聊房间号，使用旧方式加载消息');
                    loadPrivateChatMessages();
                }
            } else if (chatType === 'group' && chatRoom && chatRoom.roomCode && currentUser && currentUser.id) {
                console.log('准备加载群聊历史消息，群聊房间号:', chatRoom.roomCode);
                logDebug(`准备加载群聊历史消息，群聊: ${chatRoom.name}(${chatRoom.roomCode})`);
                
                fetch(`/api/messages/group/${chatRoom.roomCode}`)
                    .then(response => {
                        console.log('群聊消息API响应状态:', response.status);
                        logDebug('群聊消息API响应状态: ' + response.status);
                        return response.json();
                    })
                    .then(messages => {
                        console.log('加载群聊历史消息:', messages);
                        logDebug('加载到' + (Array.isArray(messages) ? messages.length : 0) + '条群聊历史消息');
                        
                        if (Array.isArray(messages) && messages.length > 0) {
                            logDebug('群聊历史消息示例: ' + JSON.stringify(messages[0]));
                            
                            messages.forEach((message, index) => {
                                console.log(`处理第${index+1}条消息:`, message);
                                
                                // 检查消息对象结构
                                if (!message) {
                                    console.error('消息对象为空');
                                    logDebug('消息对象为空');
                                    return; // 跳过此消息
                                }
                                
                                // 适配后端返回的两种可能格式
                                let isSent = false;
                                let displayMessageData = {};
                                
                                // 处理包含sender对象的格式
                                if (message.sender && message.sender.id) {
                                    isSent = message.sender.id == currentUser.id;
                                    displayMessageData = {
                                        content: message.content,
                                        senderUsername: message.sender.username,
                                        timestamp: message.timestamp,
                                        senderAvatar: message.sender.username.charAt(0).toUpperCase(),
                                        roomCode: chatRoom.roomCode,
                                        groupMessage: true
                                    };
                                } 
                                // 处理扁平化的格式（直接包含senderUsername等属性）
                                else if (message.senderUsername) {
                                    isSent = message.senderUsername === currentUser.username;
                                    displayMessageData = {
                                        content: message.content,
                                        senderUsername: message.senderUsername,
                                        timestamp: message.timestamp,
                                        senderAvatar: message.senderUsername.charAt(0).toUpperCase(),
                                        roomCode: message.roomCode || chatRoom.roomCode,
                                        groupMessage: true
                                    };
                                } else {
                                    console.error('无法识别的消息格式:', message);
                                    logDebug('无法识别的消息格式: ' + JSON.stringify(message));
                                    return; // 跳过此消息
                                }
                                
                                logDebug(`显示消息: ${displayMessageData.content}, 发送者: ${displayMessageData.senderUsername}, 是否为发送方: ${isSent}`);
                                displayMessage(displayMessageData, isSent);
                            });
                            
                            // 滚动到底部
                            const chatMessages = document.getElementById('chat-messages');
                            chatMessages.scrollTop = chatMessages.scrollHeight;
                            console.log('群聊历史消息加载完成并滚动到底部');
                            logDebug('群聊历史消息加载完成并滚动到底部');
                        } else {
                            console.log('没有找到群聊历史消息或消息格式不正确');
                            logDebug('没有找到群聊历史消息或消息格式不正确');
                        }
                    })
                    .catch(error => {
                        console.error('加载群聊消息失败:', error);
                        logDebug('加载群聊消息失败: ' + error.message);
                    });
            } else {
                console.log('无法加载历史消息，聊天信息不完整');
                logDebug('无法加载历史消息，聊天信息不完整');
                if (!chatType) {
                    logDebug('缺少聊天类型');
                }
                if (chatType === 'private' && (!targetUser || !targetUser.id)) {
                    logDebug('缺少目标用户信息');
                }
                if (chatType === 'group' && (!chatRoom || !chatRoom.roomCode)) {
                    logDebug('缺少群聊房间信息');
                }
                if (!currentUser || !currentUser.id) {
                    logDebug('缺少当前用户信息');
                }
            }
        }
        
        // 使用用户ID加载私聊消息（旧方式）
        function loadPrivateChatMessages() {
            fetch(`/api/messages/private?user1Id=${currentUser.id}&user2Id=${targetUser.id}`)
                .then(response => response.json())
                .then(messages => {
                    console.log('加载私聊历史消息(旧方式):', messages);
                    logDebug('加载到' + (Array.isArray(messages) ? messages.length : 0) + '条私聊历史消息(旧方式)');
                    
                    if (Array.isArray(messages) && messages.length > 0) {
                        logDebug('私聊历史消息示例(旧方式): ' + JSON.stringify(messages[0]));
                        
                        messages.forEach((message, index) => {
                            console.log(`处理第${index+1}条消息(旧方式):`, message);
                            
                            // 检查消息对象结构
                            if (!message) {
                                console.error('消息对象为空');
                                logDebug('消息对象为空');
                                return; // 跳过此消息
                            }
                            
                            // 适配后端返回的两种可能格式
                            let isSent = false;
                            let displayMessageData = {};
                            
                            // 处理包含sender对象的格式
                            if (message.sender && message.sender.id) {
                                isSent = message.sender.id == currentUser.id;
                                displayMessageData = {
                                    content: message.content,
                                    senderUsername: message.sender.username,
                                    receiverUsername: message.receiver ? message.receiver.username : targetUser.username,
                                    timestamp: message.timestamp,
                                    senderAvatar: message.sender.username.charAt(0).toUpperCase()
                                };
                            } 
                            // 处理扁平化的格式（直接包含senderUsername等属性）
                            else if (message.senderUsername) {
                                isSent = message.senderUsername === currentUser.username;
                                displayMessageData = {
                                    content: message.content,
                                    senderUsername: message.senderUsername,
                                    receiverUsername: message.receiverUsername || targetUser.username,
                                    timestamp: message.timestamp,
                                    senderAvatar: message.senderUsername.charAt(0).toUpperCase()
                                };
                            } else {
                                console.error('无法识别的消息格式:', message);
                                logDebug('无法识别的消息格式: ' + JSON.stringify(message));
                                return; // 跳过此消息
                            }
                            
                            logDebug(`显示消息(旧方式): ${displayMessageData.content}, 发送者: ${displayMessageData.senderUsername}, 是否为发送方: ${isSent}`);
                            displayMessage(displayMessageData, isSent);
                        });
                        
                        // 滚动到底部
                        const chatMessages = document.getElementById('chat-messages');
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                        console.log('私聊历史消息加载完成并滚动到底部(旧方式)');
                        logDebug('私聊历史消息加载完成并滚动到底部(旧方式)');
                    } else {
                        console.log('没有找到私聊历史消息或消息格式不正确(旧方式)');
                        logDebug('没有找到私聊历史消息或消息格式不正确(旧方式)');
                    }
                })
                .catch(error => {
                    console.error('加载私聊消息失败(旧方式):', error);
                    logDebug('加载私聊消息失败(旧方式): ' + error.message);
                });
        }
        
        // 初始化页面
        function initPage() {
            console.log('开始初始化页面...');
            console.log('聊天类型:', chatType);
            console.log('用户ID:', userId);
            console.log('聊天室号:', roomCode);
            
            if (chatType === 'private' && userId) {
                // 加载目标用户信息
                fetch(`/api/users/info/${userId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('用户数据加载失败');
                        }
                        return response.json();
                    })
                    .then(user => {
                        if (!user || !user.id) {
                            throw new Error('用户数据不完整');
                        }
                        console.log('成功加载目标用户:', user);
                        
                        targetUser = user;
                        document.getElementById('chat-target-name').textContent = user.username;
                        document.getElementById('chat-target-avatar').textContent = user.username.charAt(0).toUpperCase();
                        document.title = `聊天室 - ${user.username}`;
                        
                        // 获取或创建私聊房间号
                        return fetch(`/api/users/${currentUser.id}/friends/${user.id}`, {
                            method: 'POST'
                        });
                        })
                        .then(response => response.json())
                        .then(data => {
                            privateChatRoomCode = data.privateChatRoomCode;
                            console.log('获取到私聊房间号:', privateChatRoomCode);
                            logDebug('获取到私聊房间号: ' + privateChatRoomCode);
                            
                        // 先尝试直接加载历史消息
                        console.log('房间号获取成功，先尝试加载历史消息');
                        logDebug('房间号获取成功，先尝试加载历史消息');
                                loadMessages();
                        
                        // 连接WebSocket
                        connectWebSocket();
                        })
                        .catch(error => {
                            console.error('获取私聊房间号失败:', error);
                            logDebug('获取私聊房间号失败: ' + error.message);
                        // 即使获取房间号失败，也尝试连接WebSocket
                        connectWebSocket();
                    });
            } else if (chatType === 'group' && roomCode) {
                // 加载群聊信息
                fetch(`/api/chatrooms/search?roomCode=${roomCode}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('群聊数据加载失败');
                        }
                        return response.json();
                    })
                    .then(room => {
                        if (!room || !room.roomCode) {
                            throw new Error('群聊数据不完整');
                        }
                        console.log('成功加载群聊:', room);
                        
                        chatRoom = room;
                        document.getElementById('chat-target-name').textContent = room.name;
                        document.getElementById('chat-target-avatar').textContent = room.name.charAt(0).toUpperCase();
                        document.getElementById('chat-target-avatar').style.backgroundColor = '#FF9800';
                        document.getElementById('room-code-display').textContent = `房间号: ${room.roomCode}`;
                        document.title = `聊天室 - ${room.name}`;
                        
                        // 先尝试直接加载历史消息
                        console.log('群聊信息获取成功，先尝试加载历史消息');
                        logDebug('群聊信息获取成功，先尝试加载历史消息');
                        loadMessages();
                        
                        // 连接WebSocket
                        connectWebSocket();
                    })
                    .catch(error => {
                        console.error('加载群聊信息失败:', error);
                        alert('无法加载群聊信息，请返回重试');
                        window.location.href = '/users';
                    });
            } else {
                window.location.href = '/users';
            }
        }
        
        // 发送消息事件
        document.getElementById('send-btn').addEventListener('click', sendMessage);
        document.getElementById('message-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
        
        // 新增：订阅私聊房间
        function subscribeToPrivateChatRoom(roomCode) {
            const subscriptionPath = `/topic/private.${roomCode}`;
            console.log('正在订阅私聊房间: ', subscriptionPath);
            logDebug('开始订阅私聊房间: ' + subscriptionPath);
            
            // 更新调试面板
            document.getElementById('subscription-path').textContent = subscriptionPath;
            
            try {
                const subscription = stompClient.subscribe(subscriptionPath, function(message) {
                    console.log('触发私聊房间消息回调函数');
                    console.log('收到私聊房间消息: ', message);
                    console.log('消息内容: ', message.body);
                    console.log('消息头部信息:', message.headers);
                    console.log('消息目标地址:', message.headers.destination);
                    
                    // 添加强化调试
                    logDebug('======收到私聊房间消息======');
                    logDebug('消息头部: ' + JSON.stringify(message.headers));
                    logDebug('消息体: ' + message.body);
                    
                    try {
                        const messageData = JSON.parse(message.body);
                        console.log('解析后的消息数据: ', messageData);
                        
                        // 不显示自己发送的消息(因为发送时已显示)
                        if (messageData.senderUsername !== currentUser.username) {
                            logDebug('显示接收到的私聊房间消息');
                            
                            // 添加前端显示所需的额外信息
                            const displayMessageData = {
                                ...messageData,
                                senderAvatar: messageData.senderUsername.charAt(0).toUpperCase()
                            };
                            
                            displayMessage(displayMessageData, false);
                        } else {
                            logDebug('忽略自己发送的消息');
                        }
                    } catch (error) {
                        console.error('解析消息失败: ', error);
                        console.error('错误详情:', error.message);
                        console.error('原始消息:', message.body);
                    }
                });
                
                console.log('私聊房间订阅状态:', subscription ? '成功' : '失败');
                console.log('私聊房间订阅ID:', subscription.id);
                logDebug('私聊房间订阅成功，ID: ' + subscription.id);
                
                // 保存房间号
                privateChatRoomCode = roomCode;
                
                return subscription;
            } catch (error) {
                console.error('私聊房间订阅过程中出错:', error);
                logDebug('私聊房间订阅失败: ' + error.message);
                return null;
            }
        }
        
        // 测试消息显示
        function testDisplayMessage() {
            console.log('测试消息显示功能');
            logDebug('测试消息显示功能');
            
            const testMessage = {
                content: "这是一条测试消息",
                senderUsername: "测试用户",
                receiverUsername: currentUser ? currentUser.username : "当前用户",
                timestamp: new Date().toISOString(),
                senderAvatar: "测"
            };
            
            displayMessage(testMessage, false);
            
            const testSelfMessage = {
                content: "这是一条自己发送的测试消息",
                senderUsername: currentUser ? currentUser.username : "当前用户",
                receiverUsername: "测试用户",
                timestamp: new Date().toISOString(),
                senderAvatar: currentUser ? currentUser.username.charAt(0).toUpperCase() : "我"
            };
            
            displayMessage(testSelfMessage, true);
            
            console.log('测试消息已显示');
            logDebug('测试消息已显示');
        }
        
        // 初始化
        initPage();
        
        // 测试消息显示功能
        // 取消注释下面这行以测试消息显示
        // setTimeout(testDisplayMessage, 2000);
    </script>
</body>
</html> 